<template>
	<div class="app-container">
		<div class="header">{{form.productName}}</div>
		<div class="main">
			<div style="width: 342px; height: 342px; border: #dcdfe6 1px solid; margin-right: 20px">
				<swiper
					:slides-per-view="1"
					style="width: 100%"
					:modules="[Pagination]"
					:pagination="true"
					:space-between="50"
					@swiper="onSwiper"
					@slideChange="onSlideChange"
				>
					<swiper-slide v-for="(item,index) in form.imgPaths" :key="index"><el-image style="width: 340px; height: 340px" :src="pre+item" fit="fill" /></swiper-slide>
				</swiper>
			</div>
			<div style="flex: 1">
				<div class="row-header">基本信息</div>
				<div style="height: 40px; line-height: 40px; margin-bottom: 20px"><span class="label">品牌：</span>{{form.productBrand}}</div>
				<div class="row-header">附件信息</div>
				<div class="info-url" v-for="(item,index) in form.filePaths" :key="index" @click="downloadfile(item)">
					<el-icon style="position: relative; top: 3px"><Link /></el-icon>&nbsp;{{ item }}
				</div>
			</div>
		</div>
		<div style="line-height: 80px; height: 80px; padding-left: 35%; margin-top: 20px">
			<el-button @click="reback">返回</el-button>
		</div>
	</div>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/pagination'
import { Pagination } from 'swiper/modules'
import { getConfigKey } from '@/api/system/config'
import { getProduct } from '@/api/product/product'
import { useRoute } from 'vue-router'
import { download } from '@/utils/request'

import { reactive } from 'vue'
import useTagsViewStore from '@/store/modules/tagsView'
const tagsView = useTagsViewStore()
const route = useRoute()
const imgUrl = ref('')
const pre = ref('')
getConfigKey('img_upload').then((response) => {
	imgUrl.value = response.msg
})
const form = reactive({
	productId: '',
	productName: '',
	productBrand: '',
	isRecommend: '',
	filePaths: [],
	imgPaths: []
})
const init = () => {
	getProduct(route.query.id).then((res) => {
		for (let item in form) {
			form[item] = res.data[item] + ''
		}
		form['imgPaths'] = res.data.imgPaths
		form['filePaths'] = res.data.filePaths
	})
}
getConfigKey('sys.upload').then((response) => {
	pre.value = response.msg
	init()
})
const router = useRouter()
const onSwiper = (swiper) => {
}
const onSlideChange = () => {
}
const downloadfile =(url) => {
	download({ url: url }).then()
}
const reback = () => {
	tagsView.delView(router.currentRoute.value)
router.go(-1)
}
</script>
<style lang="scss" scoped>
.header {
	font-size: 20px;
	font-weight: 600;
	line-height: 50px;
	height: 50px;
	border-bottom: #dcdfe6 1px solid;
}
.main {
	margin: 20px 0;
	display: flex;
	.row-header {
		color: #1badec;
		font-weight: 600;
		height: 24px;
		line-height: 24px;
		border-bottom: 1px rgba(240, 240, 240, 1) solid;
	}
	.label {
		margin: 5px;
        margin-right: 10px;
		padding: 8px 25px;
		width: 80px;
		text-align: center;
		font-size: 16px;
        font-weight: 400;
		background-color: #f9f9f9;
	}
	.info-url {
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		background-color: #3f9efe;
		color: #ffffff;
		margin: 10px 0;
		padding-left: 10px;
		cursor: pointer;
	}
}
</style>
